<template>
<!-- 头部主要由三部分构成 -->
  <div class='header'>
      <div class="header-left">
        <div class='iconfont'>&#xe60f;</div>
      </div>
      <div class="header-input">
        <span class='iconfont'>&#xe629;</span>
        输入城市</div>
      <div class="header-right">
        城市
      <span class='iconfont'>&#xe62d;</span>
        </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      msg: 'Welcome to Your Vue.header'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
// 添加样式，使用stylus，并使用scoped来限制该样式只在这个文件中才能使用
<style lang="stylus" scoped>
.header
    display :flex
    line-height :.86 rem
    background :#00bcd4
    color:#fff
    .header-left
        width:0.64 rem
        float:left
    .header-input
        height: .64 rem
        line-height: .64 rem
        margin-top:.12rem
        margin-left:.2rem
        flex:1
        background:#fff
        border-radius:.1 rem
        color :#ccc
        padding-left:.2 rem
    .header-right
        width: 1.24 rem
        float:right
        text-align :center
</style>
